<template>
  <div class="login-page min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
      <h2 class="text-2xl font-bold text-center mb-6">用户登录</h2>
      
      <form @submit.prevent="submitForm">
        <div class="mb-4">
          <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">用户名或邮箱</label>
          <input
            type="text"
            id="username"
            v-model="loginForm.username"
            placeholder="请输入用户名或邮箱"
            autofocus
            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
        </div>
        
        <div class="mb-4">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">密码</label>
          <input
            type="password"
            id="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
          >
        </div>
        
        <div class="flex justify-between items-center mb-6">
          <div class="flex items-center">
            <input
              type="checkbox"
              id="rememberMe"
              v-model="rememberMe"
              class="mr-2"
            >
            <label for="rememberMe" class="text-sm text-gray-600 dark:text-gray-400">记住我</label>
          </div>
          <a href="#" class="text-sm text-primary hover:underline">忘记密码？</a>
        </div>
        
        <button 
          type="submit"
          :disabled="isSubmitting"
          class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200 disabled:opacity-70 disabled:cursor-not-allowed"
        >
          {{ isSubmitting ? '登录中...' : '登录' }}
        </button>
        
        <div class="text-center mt-6">
          <span class="text-gray-600 dark:text-gray-400">还没有账号？</span>
          <a 
            href="/register" 
            class="text-primary hover:underline ml-1"
          >
            立即注册
          </a>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import { LoginRequest } from '@/types'

// 状态
const isSubmitting = ref<boolean>(false)
const rememberMe = ref<boolean>(false)

// 登录表单
const loginForm = reactive<LoginRequest>({
  username: '',
  password: ''
})

// 路由
const router = useRouter()

// 认证store
const authStore = useAuthStore()

// 提交表单
  const submitForm = async () => {
    try {
      // 简单的表单验证
      if (!loginForm.username.trim()) {
        alert('请输入用户名或邮箱')
        return
      }
      if (!loginForm.password.trim()) {
        alert('请输入密码')
        return
      }
      if (loginForm.password.length < 6 || loginForm.password.length > 20) {
        alert('密码长度在 6 到 20 个字符')
        return
      }
      
      isSubmitting.value = true
      await authStore.login(loginForm)
      // 登录成功后跳转到首页
      router.push('/')
    } catch (error: any) {
      alert(`登录失败: ${error.message || '请检查用户名和密码'}`)
    } finally {
      isSubmitting.value = false
    }
  }
</script>

<style scoped>
.login-page {
  padding: 1rem;
}
</style>
